import { history } from 'umi';
import React from 'react';
import { Flex, NavBar, Input, Form, Button, NoticeBar, Tabbar, Image, Stepper } from 'react-vant';
import { SafeArea } from 'antd-mobile';
import { InfoO, Chat } from '@react-vant/icons';
import './order.less';

const goBack = () => {
  history.back();
}
const goOrderResult = () => {
  history.push('/order-result');
}

export default function OrderPage() {
  const [form] = Form.useForm()
  return (
    <div className='order'>
      <NavBar title='确认订单' leftText='返回' onClickLeft={goBack} />
      <div className='order-info'>
        <Flex direction='row' gutter={10} align='center' justify='between'>
          <Flex.Item>
            <Flex gutter={15} align='center'>
              <Flex.Item><Image round width='64' height='64' fit='cover'
                                src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg'/></Flex.Item>
              <Flex.Item>
                <div className='nickname'>小熊</div>
                <div className='event-meta'>共进晚餐</div>
                <div className='event-meta'>今天 17:00 ~ 20:00</div>
              </Flex.Item>
            </Flex>
          </Flex.Item>
          <Flex.Item className='order-price'>¥ 220.00 <span>x 3</span></Flex.Item>
        </Flex>
      </div>
      <div className='container'>
        <h4 className='order-title'>订单信息</h4>
        <Form form={form} className='order-form'>
          <Form.Item
            rules={[{required: true, message: '请选择下单时长'}]}
            name='hours'
            label='下单时长'
          >
            <Stepper
              value={3}
              min={2}
              max={96}
              onOverlimit={() => console.log('overlimit')}
              onMinus={() => console.log('minus')}
              onPlus={() => console.log('plus')}
              onChange={v => console.log(v)}
            />
          </Form.Item>
          <Form.Item
            rules={[{required: true, message: '请填写约玩地点'}]}
            name='location'
            label='约玩地点'
          >
            <Input placeholder='请输入约玩地点'/>
          </Form.Item>
          <Form.Item
            rules={[{required: true, message: '请填写预约人姓名'}]}
            name='nickname'
            label='您的姓名'
          >
            <Input placeholder='请输入预约人姓名'/>
          </Form.Item>
          <Form.Item
            rules={[{required: true, message: '请填写预约人手机号码'}]}
            name='mobile'
            label='手机号码'
          >
            <Input type='number' placeholder='请输入预约人手机号'/>
          </Form.Item>
          <Form.Item
            rules={[{required: false, message: '请填写备注'}]}
            name='note'
            label='备注'
          >
            <Input placeholder='请输入备注信息'/>
          </Form.Item>
        </Form>
        <h4 className='order-title'>注意事项</h4>
        <ul className='order-tips'>
          <li className='tip'>1. 下单后需添加客服微信，由客服继续为您服务。</li>
          <li className='tip'>2. 客服将为您创建微信群聊，并联系陪玩搭档。</li>
          <li className='tip'>3. 陪玩与您的距离超出3km以上，需报销来回车费。</li>
          <li className='tip'>4. 本平台为绿色约玩平台，禁止一切违反法律法规、危害社会治安、色情及低俗行为。</li>
        </ul>
        <NoticeBar
          className='order-notice'
          leftIcon={<InfoO />}
          text='下单30分钟后陪玩未接单可联系客服退款'
        />
      </div>
      <div className='partner-submit-bar'>
        <Tabbar placeholder>
          <div className='container'>
            <Flex align='center' justify='between' className='submit-area'>
              <Flex.Item>
                <Button round plain className='btn-service' color='#43cf7c' size='small' icon={<Chat />}>客服</Button>
              </Flex.Item>
              <Flex.Item>
                <Flex align='center'>
                  <Flex.Item className='submit-label'>合计：</Flex.Item>
                  <Flex.Item className='submit-price'>¥<span>660</span>.00</Flex.Item>
                  <Flex.Item className='submit-label'>元</Flex.Item>
                  <Flex.Item><Button className='submit-btn' round type='primary' color='linear-gradient(to right, #ff78b7, #ff5959)' onClick={goOrderResult}>立即支付</Button></Flex.Item>
                </Flex>
              </Flex.Item>
            </Flex>
          </div>
        </Tabbar>
        <SafeArea position='bottom' />
      </div>
    </div>
  );
}
